<!--
 * @Description: 产品详情弹窗
 * @Author: 黄勇
 * @Date: 2020-03-09 15:36:26
 * @LastEditTime: 2020-04-09 17:21:27
 * @LastEditors: 黄勇
 -->
<template>
    <AppDialog
        :isShowDialog="true"
        width="900px"
        title="产品生产"
        @confirm="$emit('close')"
        @close="$emit('close')"
        :isShowCancelBtn="false"
        class="clean-el-dialog__body"
    >
        <div class="product-detail">
            <p class="product-detail__header">产品信息</p>
            <div class="product-detail__content">
                <div class="product-detail__left">
                    <div class="product-detail__item">
                        <label class="product-detail__label">产品编码:</label>
                        <div class="product-detail__input only-show text-ellipsis">{{detailData.code}}</div>
                    </div>
                    <div class="product-detail__item">
                        <label class="product-detail__label">产品名称:</label>
                        <div class="product-detail__input only-show text-ellipsis">{{detailData.name}}</div>
                    </div>

                </div>
                <div class="product-detail__right">
                    <div class="product-detail__item">
                        <label class="product-detail__label">产品类型:</label>
                        <div class="product-detail__input only-show text-ellipsis">{{detailData.typeDisplay}}</div>
                    </div>
                </div>
            </div>
            <p class="product-detail__header">云协同信息</p>
            <div class="product-detail__content">
                <div class="product-detail__left">
                    <div class="product-detail__item">
                        <label class="product-detail__label">产品线:</label>
                        <div class="product-detail__input only-show text-ellipsis">{{detailData.parameter.productLine}}</div>
                    </div>

                    <div class="product-detail__item">
                        <label class="product-detail__label">版本号:</label>
                        <div class="product-detail__input only-show text-ellipsis">{{detailData.parameter.version}}</div>
                    </div>
                </div>
                <div class="product-detail__right">
                    <div class="product-detail__item">
                        <label class="product-detail__label">版本类型:</label>
                        <div class="product-detail__input only-show text-ellipsis">{{detailData.parameter.versionType}}</div>
                    </div>
                </div>
            </div>
            <p class="product-detail__header">产品包服务信息</p>
            <div >
                <el-table
                    :data="detailData.products"
                    tooltip-effect="dark"
                    header-row-class-name="header-row"
                    style="width: 100%"
                >

                    <el-table-column
                        prop="code"
                        label="服务编码"
                        width="180"
                    ></el-table-column>
                    <el-table-column
                        prop="typeDisplay"
                        label="服务类型"
                        
                    ></el-table-column>
                    <el-table-column
                        prop="name"
                        label="服务名称"
                        :show-overflow-tooltip="true"
                    >
                    </el-table-column>
                    <el-table-column
                        label="服务方式"
                       
                    >
                        <template slot-scope="scope">
                            {{
                                staticType.getStaticTypeLabel('serviceModeType', scope.row.serviceModeType)
                            }}
                        </template>
                    </el-table-column>

                    <el-table-column
                        prop="parameter.serviceContent"
                        label="服务内容"
                        
                    >
                        <template slot-scope="scope">
                            <!-- {{
                                getServiceContent(scope.row)
                            }} -->
                            <div v-if=" scope.row.serviceModeType === staticType.getStaticTypeValue('serviceModeType', 'count') || scope.row.serviceModeType === staticType.getStaticTypeValue('serviceModeType', 'counttime')">
                                数量: {{scope.row.parameter.serviceMode.count}}个
                            </div>
                            <div v-if=" scope.row.serviceModeType === staticType.getStaticTypeValue('serviceModeType', 'time') || scope.row.serviceModeType === staticType.getStaticTypeValue('serviceModeType', 'counttime')">
                                时长: {{scope.row.parameter.serviceMode.time}}个月
                            </div>
                        </template>
                        
                    </el-table-column>
                    <el-table-column
                        prop="billingPolicy.policyName"
                        label="计费方式"
                        :show-overflow-tooltip="true"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="saleTypeDisplay"
                        label="使用类型"
                        
                    >

                    </el-table-column>

                </el-table>
            </div>
        </div>

    </AppDialog>
</template>

<script>
import AppDialog from "@/components/AppCommon/AppDialog";
export default {
    name: "product-detail",
    components: {
        AppDialog
    },
    props: {
        detailProduct: {
            type: Object,
            required: true
        }
    },
    computed: {},
    data: () => ({
        detailData: {
            parameter: {},
            billingPolicy: {},
            products: []
        }
    }),
    created() {
        this.getProductDetail();
    },
    mounted() {},
    watch: {},
    methods: {
        // 获取产品详情
        getProductDetail() {
            this.api
                .getProductDetail(
                    {
                        params: {
                            productId: this.detailProduct.productPackageId
                        }
                    },
                    {
                        method: "get",
                        customRequest: true
                    }
                )
                .then(res => {
                    this.detailData = res.data;
                })
                .catch(err => {});
        },
        // 拼接服务内容字段
        getServiceContent(row) {
            let result = "";
            
            if (row && row.parameter && row.parameter.serviceMode && row.parameter.serviceMode.type) {
                let type = row.parameter.serviceMode.type;
                let serviceMode = row.parameter.serviceMode;
                let staticType = this.staticType;
                
                switch (type) {
                    case staticType.getStaticTypeValue(
                        "serviceModeType",
                        "count"
                    ):
                        result = `${serviceMode.count}次`;
                        break;
                    case staticType.getStaticTypeValue(
                        "serviceModeType",
                        "time"
                    ):
                        result = `${serviceMode.time}个月`;
                        break;
                    case staticType.getStaticTypeValue(
                        "serviceModeType",
                        "counttime"
                    ):
                        result = `${serviceMode.count}次+${serviceMode.time}个月`;
                        break;
                    default:
                        break;
                }
            }
            return result;
        }
    }
};
</script>

<style lang="scss" scoped src="../../../assets/styles/product/dialog.scss"></style>